<template>
  <div class="maintance-type-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-row">
        <el-form 
          :model="dg.ps" 
          :inline="true" 
          @keyup.enter.native="getDgList">
          <el-form-item>
            <el-input
              style="width: 150px"
              placeholder="维修类型名称"
              v-model="dg.ps.typeName"
            />
          </el-form-item>
          
          <el-button 
            type="primary" 
            icon="el-icon-search" 
            @click="getDgList">
            搜索
          </el-button>

          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="setAdupMaintanceTypeMd({state: true})">
            新增
          </el-button>
        </el-form>
      </div>

      <TableSelfSet
        v-if="dg.columns.length > 0"
        :tbTitle="'维修类型'"
        :dgName="dg.dgName"
        :tbId="dg.tbName"
        :srcCols="dg.srcCols"
        :columns="dg.columns"
        @saveSet="saveTbSet"
      />
    </div>

    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight"
      border fit 
      :row-class-name="rowClassName"
      @header-dragend="dragHeader"
      @selection-change="selRowChange">
      <el-table-column 
        fixed="left" 
        type="index" 
        label="编号"
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>
      <el-table-column 
        v-for="(col, index) in dg.columns" 
        :key="index"
        :class-name="dg.dgName"
        :prop="col.field"
        :label="col.label"
        :width="col.width">
        <template slot-scope="{ row }">
          <template v-if="col.field == 'oper'">
            <template v-if="row.isDefault != 1">
              <el-button 
                type="text" 
                size="small" 
                @click="setAdupMaintanceTypeMd({state: true, row: row})">
                修改
              </el-button>
              
              <el-button 
                type="text" 
                size="small" 
                @click="delMaintanceType(row)">
                删除
              </el-button>
            </template>
          </template>
          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-show="dg.total > 0"
      :total="dg.total"
      :page.sync="dg.ps.page"
      :limit.sync="dg.ps.rows"
      @pagination="getDgList"
    />

    <AdupMaintanceType
      v-if="adupMaintanceTypeMd.state"
      :myData="adupMaintanceTypeMd"
      @myClick="setAdupMaintanceTypeMd"
      @reloadDg="getDgList"
    />

  </div>
</template>
<script>
import DataGridBase from "@/views/mixins/DataGridBase";
import DataGridResize from "@/views/mixins/DataGridResize";
import TableSelfSet from "@/components/TableSelfSet";
import Pagination from "@/components/Pagination";

import AdupMaintanceType from "./AdupMaintanceType";

import * as systemSer from "@/api/services/system.service";

export default {
  name: "MaintanceType",
  mixins: [DataGridBase, DataGridResize],
  components: { TableSelfSet, Pagination, AdupMaintanceType },
  data() {
    let cols = [
      { label: "添加名称", field: "typeName" },
      { label: "添加时间", field: "addTime", width: 140 },
      { label: "操作", field: "oper", width: 100 },
    ];

    return {
      dg: {
        dgName: "dg",
        tbName: "maintanceTypeTb",
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          // 过滤参数
          page: 1, rows: 20,
          typeName: "",
        },
      },
      // 添加/修改-维修类型-弹框
      adupMaintanceTypeMd: {state: false},
    };
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();
  },
  methods: {
    /** 获取-分页列表数据 */
    getDgList() {
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);

      systemSer.findRepairTypeList(ps).then((res) => {
        let { code, data, count } = res;
        if (code === 1) {
          let list = data;
          list.forEach((it) => { it.dgName = dg.dgName; });
          dg.list = list;
          dg.total = count;
        }
      });
    },

    /** 打开/隐藏-添加/修改维修类型-弹框 */
    setAdupMaintanceTypeMd(e) {
      const that = this, U = that.U, md = that.adupMaintanceTypeMd;

      if(!e.state){// 关闭
        md.obj = null;
        md.state = false;
      }else{// 打开
        if(e.row){// 修改
          md.obj = e.row;
        }else{// 添加

        }
        md.state = true;
      }
    },

    // 删除-维修类型
    delMaintanceType(row) {
      const that = this, U = that.U;

      if (row.isDefault == 1) {
        U.qwarning("系统默认的类型，不能删除，请重新选择");
      }else{
        U.qconfim(`确认删除维修类型【${row.typeName}】吗？`).then(r => {
          if(r){
            systemSer.delRepairType({ delId: row.id }).then((res) => {
              const { code, msg } = res;
              if (code !== 1) {
                U.qerror(msg);
              }else{
                U.qsuccess(msg);
                that.getDgList();
              }
            });
          }
        });
      }
    },
    
  },
};
</script>
